<template>
  <div id="statsChart">
    <div class="d-flex py-3 px-2" style="align-items: center; width: 100%;">
      <DataItem :number="data.offHookCount" label="摘机数" numberColor="#FFFFFF" labelColor="#3DE7C9" unit="次"/>
      <DataItem :number="data.missedCallCount" label="未接听数" numberColor="#FFFFFF" labelColor="#3DE7C9" unit="次"/>
    </div>
    <div class="d-flex py-3 px-2" style="align-items: center; width: 100%;">
      <DataItem :number="data.avgOffHookTime" label="平均摘机用时(s)" type="barProgress" numberColor="#FFFFFF" labelColor="#3DE7C9" unit="个"/>
      <DataItem :number="data.missedCallRate" label="未接听率" type="circle" numberColor="#FFFFFF" labelColor="#3DE7C9" unit="个"/>
    </div>
  </div>
</template>

<script>
import DataItem from "@/components/DataItem.vue";
export default {
  components: {
    DataItem
  },
  props: {

  },
  data() {
    return {
      data: {
        offHookCount: 748,
        missedCallCount: 18,
        avgOffHookTime: 0.76,
        missedCallRate: 2.34
      }
    }
  }
};
</script>

<style lang="scss" scoped>
$box-height: 250px;
#statsChart {
  padding: 20px;
  height: $box-height;
}

</style>
